<template>
	<view class="transfer">
		<view class="title">
			转账记录
		</view>
		<view class="transfer_list" v-if="history.length > 0">
			<view class="list_item" v-for="(item, index) in history" :key="index">
				<image class="item-img" :src="item.detailImages" mode=""></image>
				<view class="item">
					<view class="user">
						<view class="">
							卖方：<text>{{ item.sellerName }}</text>
						</view>
						<view class="">
							买方：<text>{{ item.purchaserName }}</text>
						</view>
					</view>
					<view class="item-price">
						成交价:{{ item.transactionPrice }}镇北币
					</view>
					<view class="item-date">
						转让时间：{{ item.startingTime }}
					</view>
				</view>
			</view>

		</view>
		<view v-else>
			<NoData></NoData>
			<view style="color:#fff;text-align:center">暂无转账记录</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			history: []
		}
	},
	onShow() {
		this.getList()
	},
	methods: {
		getList() {
			// 转账记录
			this.$http('/sale/selectAllSaleHistory/2', "get").then(res => {
				this.history = res.data.list;
				this.history.map(item => {
					const date = new Date(item.startingTime);
					const formattedDate = date.toLocaleString();
					item.startingTime = formattedDate
				})
			})
		}
	}
}
</script>

<style scoped lang="scss">
page {
	background: url(../../static/bgColor.png) center/ cover no-repeat;

	.transfer {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		// padding: 20rpx 30rpx;

		.title {
			background: url('../../static/manghe/top.png');
			background-size: contain;
			background-repeat: no-repeat;
			width: 500rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx auto;
			font-weight: 900;
			color: #f3d26e;
			font-size: 35rpx;
		}

		.transfer_list {
			.list_item {
				width: 650rpx;
				height: 250rpx;
				background: url(../../static/manghe/itemcard.png) center/ contain no-repeat;
				padding: 20rpx;
				display: flex;
				margin: 0 auto;

				.item-img {
					width: 240rpx;
					height: 240rpx;
				}

				.item {
					margin-left: 20rpx;

					.user {
						width: 400rpx;
						color: #fff;
						display: flex;
						margin: 60rpx 0 30rpx 0;
						font-size: 33rpx;
						justify-content: space-between;

						text {
							display: inline-block;
							width: 100rpx;
							white-space: nowrap;
							/* 强制文本在一行内显示，防止换行 */
							overflow: hidden;
							/* 隐藏超出容器的文本 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
						}
					}

					.item-price {
						margin-bottom: 10rpx;
					}

					.item-price,
					.item-date {
						color: rgb(130, 238, 239);
						font-size: 23rpx;
					}
				}
			}
		}
	}
}
</style>